<template>
  <div class="container" :class="[{'wm-container':isWm,'yht-container':isYht}]">
    <div class="tab-search pt10" :class="[{'wm-tabBgimg':isWm,'yht-tabBgimg':isYht}]">
      <div class="top df df-c">
      <div class="address df" @click="replaceAddress">
        <img class="img" src="../assets/images/common/positioning_white.png">
        <span class="cFFF plr5">{{addrName}}</span>
        <div class="right-arrow"></div>
      </div>
      <div class="search df1" @click="openWebView('/goods/searchHome')">
        <img src="../assets/images/common/search.png" alt="">
        <input type="text" placeholder="输入药品名称、药品编码搜索" disabled>
      </div>
      <!-- <div class="vip-code df df-col" v-if="baseInfo.cardCount" @click="goCodePage">
        <img class="img" src="../assets/images/common/qr_code_white.png">
        <div class="fs10 fs10 cFFF">会员码</div>
      </div> -->
      </div>
    </div>
    <div class="main" v-if="showMain">
      <div class="user-group">
        <!--用户信息-->
        <template v-if="userInfo && userInfo.userId">
          <div class="user-info df-c plr12 pt12" @click="openWebView('/user/info/preview')">
            <image class="head-img" :src="userInfo.avatar || '../assets/images/common/default_head.png'" mode="aspectFill"></image>
            <div class="df1">
              <div class="fs20 fb">{{userInfo.nickname}}</div>
              <!-- <div class="mt5 c999 fs13">{{baseInfo.userInfo && baseInfo.userInfo.userNo}}</div> -->
              <div class="mt5 c999 fs13 df">查看个人资料<div class="right-arrow gr mt5 ml5"></div></div>
            </div>
            <div class="sign-btn-wrap" v-if="baseInfo.integralFlag == 1 && baseInfo.cardCount && baseInfo.hasSignInActivity">
              <div class="sign-btn" @click.stop="sign">
                <img class="icon" src="../assets/images/common/home_integral.png">
                <span>{{baseInfo.isSign ? '已签到' : '签到'}}</span>
              </div>
              <div class="fs12 cOrange" v-show="!baseInfo.isSign">待领取{{baseInfo.signPoints}}积分</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="user-info plr12 df-c pt12" @click="goLoginAction">
            <img class="head-img" src="../assets/images/common/default_head.png">
            <div class="df1">
              <view class="fs18 c666">未登录</view>
            </div>
            <div class="right-arrow mr5"></div>
          </div>
        </template>

        <!--nav-->
        <div class="nav-wrap plr12">
          <div class="nav-item" @click="openWebView('/user/electCurrency/list','dzb')" v-if="isECoin == '' || isECoin == 1">
            <div class="fs16 fb">{{baseInfo.electronMoney || '0'}}</div>
            <div class="fs13 c999 mt5">电子币</div>
          </div>
          <div class="nav-item" @click="openWebView('/user/coupon/couponList')">
            <div class="fs16 fb">{{baseInfo.voucherCount || '0'}}</div>
            <div class="fs13 c999 mt5">优惠券</div>
          </div>
          <div class="nav-item" @click="openWebView('/user/red/redEnvelopes')" v-show="isShenYang">
            <div class="fs16 fb">{{baseInfo.pdCard && baseInfo.pdCard.amount || '0'}}</div>
            <div class="fs13 c999 mt5">关爱金</div>
          </div>
          <div class="nav-item" @click="openWebView('/pointsMall/myPoints/index')" v-if="isIntegral == '' || isIntegral == 1">
            <div class="fs16 fb">{{baseInfo.points || '0'}}</div>
            <div class="fs13 c999 mt5">积分</div>
          </div>
        </div>

      </div>
        <!--会员码-->
        <div class="plr12" >
          <div class="vip-code-wrap" :class="[{'wm-vipcodeImg':isWm,'yht-vipcodeImg':isYht}]" v-if="baseInfo.cardCount" @click="goCodePage">
            <img v-if="!isWm && !isYht" class="diamond" style="padding:8px 0" src="../assets/images/default/home_login_logo.png" alt="">
            <img v-else-if="isWm" class="diamond" style="width:128px;height:32px" src="../assets/images/common/wanmin/home_login_logo.png" alt="">
            <img v-else-if="isYht" class="diamond" style="width:100px;height:32px" src="../assets/images/common/yanghetang/home_login_logo.png" alt="">
            <span class="df1 fs15 pl5"></span>
            <span class="pr10">会员码</span>
            <img src="../assets/images/common/my_qrcode_white.png" alt="">
          </div>
          <div class="vip-code-wrap" :class="[{'wm-vipcodeImg':isWm,'yht-vipcodeImg':isYht}]" v-if="baseInfo.storeId && !baseInfo.cardCount" @click="openWebView('/store/new?storeId=' + baseInfo.storeId)">
            <img v-if="!isWm && !isYht" class="diamond" style="padding:8px 0" src="../assets/images/default/home_login_logo.png" alt="">
            <img v-else-if="isWm" class="diamond" style="width:128px;height:32px" src="../assets/images/common/wanmin/home_login_logo.png" alt="">
            <img v-else-if="isYht" class="diamond" style="width:100px;height:32px" src="../assets/images/common/yanghetang/home_login_logo.png" alt="">
            <span class="df1 fs15 pl5 tx-r">送你一张会员卡，立即领取 >></span>
          </div>
        </div>

      <div class="box-wrap">
        <!--我的服务-->
        <div class="group service-group">
          <div class="group-title">我的服务</div>
          <div class="nav-wrap">
            <!-- <div class="nav-item" @click="openWebView('/pointsMall/draw','h5')">
              <img src="../assets/images/common/home_Integral_mall.png">
              <div class="fs12">积分抽奖</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/index','h5')">
              <img src="../assets/images/common/home_mall.png">
              <div class="fs12">送药上门</div>
            </div> -->
            <!-- <div class="nav-item" v-if="vichyShow && isShenYang" @click="openWebView(`/brandMall/home?brandId=${baseInfo.brandId}`, 'h5')">
              <img src="../assets/images/common/hoem_brand_vichy.png">
              <div class="fs12">薇姿品牌馆</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/goods/searchHome')" v-show="isShenYang">
              <img src="../assets/images/common/home_search_medicine.png">
              <div class="fs12">实时找药</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/user/card/cardList')">
              <img src="../assets/images/common/home_card_package.png">
              <div class="fs12">卡包</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/user/order/consumptionList')">
              <img src="../assets/images/common/home_records_consumption.png">
              <div class="fs12">消费记录</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/chat/room')">
              <img src="../assets/images/common/home_online_consulting.png">
              <div class="fs12">用药咨询</div>
            </div> -->
            <!-- <div class="nav-item" @click="dev">
              <img src="../assets/images/common/home_online_visits.png">
              <div class="fs12">在线问诊</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/pointsMall','h5')">
              <img src="../assets/images/common/home_online_visits.png">
              <div class="fs12">积分商城</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/index', 'healthWX')" v-show="isShenYang">
              <img src="../assets/images/common/home_healthy_community.png">
              <div class="fs12">健康社区</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/my/memberList', 'healthWX')" v-show="isShenYang">
              <img src="../assets/images/common/home_health_management.png">
              <div class="fs12">健康档案</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/specialDisease', 'healthWX')">
              <img src="../assets/images/common/home_special_disease_management.png">
              <div class="fs12">特病管理</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/chronic', 'healthWX')" v-show="isShenYang">
              <img src="../assets/images/common/home_slow_disease_management.png">
              <div class="fs12">慢病管理</div>
            </div> -->
            <!-- <div class="nav-item" @click="jumpWeizan()" v-if="isLive">
              <img src="../assets/images/common/home_live.png">
              <div class="fs12">直播活动</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/detail?id=1', 'live')" v-if="isLive">
              <img src="../assets/images/common/home_live.png">
              <div class="fs12">直播活动</div>
            </div> -->
            <!-- <div class="nav-item" @click="openWebView('/pages/nearbyStore/list', 'page')">
              <img src="../assets/images/common/home_nearby_stores.png">
              <div class="fs12">附近门店</div>
            </div> -->
          </div>
        </div>

        <!--附近门店-->
        <div class="group store-group" v-if="store" @click="openWebView('/pages/nearbyStore/list', 'page')">
          <div class="df-c padding12">
            <img v-if="!isWm && !isYht" src="../assets/images/common/home_ear_pharmacy_text.png" alt="">
            <img v-else-if="isWm" src="../assets/images/common/wanmin/home_ear_pharmacy_text.png" alt="">
            <img v-else-if="isYht" src="../assets/images/common/yanghetang/home_ear_pharmacy_text.png" alt="">
            <div class="df1 dot plr12 c666">{{store.chainName}}</div>
            <div class="theme-color" :class="[{'wm-color':isWm,'yht-color':isYht}]" >约{{store.distance}}KM</div>
            <i class="right-arrow"></i>
          </div>
        </div>

        <!--积分福利社-->
        <div class="group point-group" v-if="baseInfo.integralFlag == 1">
          <div class="group-title df-c" @click="openWebView('/pointsMall/draw')">
            <div class="df1">积分福利社</div><i class="right-arrow"></i>
          </div>
          <div class="banner-img" @click="openWebView('/pointsMall/draw')"></div>
          <!--todo 目前后端没有任务列表，只有一个固定签到任务-->
          <div class="task-list" v-if="baseInfo.cardCount && baseInfo.hasSignInActivity">
            <TaskItem taskName="每日签到"
                      :points="baseInfo.signPoints"
                      :done="baseInfo.isSign"
                      :isWm="isWm"
                      :isYht="isYht"
                      @clickBtn="sign"></TaskItem>
          </div>
          <!-- <div class="points-goods-list">
            <div class="goods-wrap"
                 v-for="(item, index) in pointsGoods" :key="item.id"
                 @click="openWebView('/pointsMall/detail?id=' + item.id)">
              <GoodsItem :info="item"></GoodsItem>
            </div>
          </div> -->
        </div>

        <!--优惠券列表-->
        <div class="group coupon-group" v-show="couponsList.length">
          <div class="group-title df-c" @click="openWebView('/activity/coupons')">
            <div class="df1">待领取优惠券</div><i class="right-arrow"></i>
          </div>
          <div class="coupon-list">
            <div :class="['coupon-wrap', {'coupon-remove': !item.isShow}]"
                 v-for="(item, index) in couponsList" :key="index">
              <CouponItem :info="item" :index="index" @removeItem="removeCouponItem" @addCouponItem="addCouponItem"></CouponItem>
            </div>
          </div>
        </div>

        <!--热门活动-->
        <div class="group activity-group" v-if="floor.length">
          <div class="group-title">热门活动</div>
          <div class="activity-wrap">
            <image class="activity-item"
                   v-for="(item, index) in floor" :key="index"
                   :src="item.banner && item.banner.advList[0] && item.banner.advList[0].advContent || ''"
                   mode="aspectFill" @click="item.banner && item.banner.type == 'brand' ?  openWebView(`/brandMall/home?brandId=${baseInfo.brandId}`, 'h5') : openWebView('/floors?pageId=' + item.pageId + '&index=' + item.index)"></image>
          </div>
        </div>
      </div>
    </div>
    <!-- 抽奖弹框 -->
    <div class="popup-wrap points-draw" v-show="drawPopupShow">
        <div class="popup-mask"></div>
        <div class="popup-body middle df-col">
          <!-- 关闭 -->
        <div class="tx-r mb5" @click.stop="closeDrawPopup">
          <img class="close" src="../assets/images/common/close_black.png" alt="">
        </div>
        <div class="draw plr12">
          <swiper
            indicator-dots="true"
            autoplay="true"
            interval="4000"
            style="height: 100%"
          >
            <swiper-item v-for="(item,index) in programWindowList" :key="index">
              <img v-if="item.href" class="draw db w100p" @click.stop="openWebView(item.href ? item.href.split('#')[1] : '', 'h5')" :src="item.imageUrl" alt="">
              <img v-else class="draw db w100p" :src="item.imageUrl" alt="">
            </swiper-item>
          </swiper>
        </div>
        <!-- <img class="draw" @click.stop="openWebView('/pointsMall/draw','h5')" src="https://guodadrugstores.cn/group1/M00/02/FF/CvAUBl3ePpiAH3Z7AAclY3N2C7Y038.png" alt=""> -->
        </div>
    </div>
    <Popup :show="signPopupShow" :closeOnClickMask="true">
      <div class="sign-popup">
        <div class="tx-r" @click="signPopupShow=false">
          <img class="close" src="../assets/images/common/close_black.png" alt="">
        </div>
        <div class="title">
          <div class="fs24 theme-color" :class="[{'wm-color':isWm,'yht-color':isYht}]">恭喜你获得{{baseInfo.signPoints}}积分</div>
          <div class="c666 mt10 fs18">限时活动：积分抽奖得豪礼</div>
          <div class="img">
            <img src="../assets/images/common/check_in_bg.png" alt="">
          </div>
        </div>
        <div class="footer df df-c">
          <button type="primary-btn" :class="[{'wm-nobtn':isWm,'yht-nobtn':isYht}]" class=" df1 mr20" @click="openWebView('/pointsMall/dailySign')">查看积分规则</button>
          <button type="primary" :class="[{'wm-btn':isWm,'yht-btn':isYht}]" class="plr20 df1" @click="openWebView('/pointsMall/draw')">立即抽奖</button>
        </div>
      </div>
    </Popup>
    <!-- <Popup :show="baseInfo.storeId && !baseInfo.cardCount" :closeOnClickMask="true">
      <div class="vip-card-popup">
        <div class="img">
          <img src="../assets/images/common/prompt_box.png" alt="">
        </div>
        <div class="content df df-col tx-c">
          <div class="fs24 theme-color mb10">温馨提示</div>
          <div class="fs16 c666 mb10">小熊感应到您在该区域存在壹药会员卡</div>
          <div class="fs16 c666 mb10">您是否需要切换会员卡？</div>
          <div class="card-img padding12 ub_1px mb20">
            <div class="df df-c">
              <div>
                <img class="logo-img" src="../assets/images/default/loading_logo.png" alt="">
              </div>
              <div class="df1 ml10">
                <div class="theme-color fb fs18 tx-l">{{vipCard.storeName}}</div>
                <div class="theme-color fb fs18 tx-l">{{vipCard.cardNo}}</div>
              </div>
              <div>
                <img class="select-img" src="../assets/images/common/select_yes.png" alt="">
              </div>
            </div>
            <div class="fs13 theme-color tx-l">
              <span>积分余额{{vipCard.points}}</span>
            </div>
          </div>
          <div class="df df-c">
            <div class="no-btn mr20">不切换</div>
            <div class="submit-btn">立即切换</div>
          </div>
        </div>
      </div>
    </Popup> -->
    <Popup :show="baseInfo.storeId && !baseInfo.cardCount && !vipCardPopupShow" :closeOnClickMask="true">
      <div class="vip-card-popup">
         <div class="top" v-if="!isWm && !isYht" >
          <div class="img-card">
            <img class="img-card" src="../assets/images/common/membership_card.png" alt="">
          </div>
          <div class="cFFF ptb10">*壹药臻选免费赠你一张会员卡</div>
        </div>
        <div v-else-if="isWm" class="top wm-vipcardBgimg">
          <div class="img-card">
            <img class="img-card" src="../assets/images/common/wanmin/membership_card.png" alt="">
          </div>
          <div class="cFFF ptb10">山西万民免费赠你一张会员卡</div>
        </div>
        <div v-else-if="isYht" class="top yht-vipcardBgimg">
          <div class="img-card">
            <img class="img-card" src="../assets/images/common/yanghetang/membership_card.png" alt="">
          </div>
          <div class="cFFF ptb10">养和堂免费赠你一张会员卡</div>
        </div>
        <div class="content">
          <div class="df df-l"> <i></i> <span class="fs15 fb mb20 tips" @click="openWebView('/user/card/cardList')">领取即享会员服务</span></div>
          <!-- <div class="df df-l"> <i></i> <span class="fs14 c666 mb10">消费200，每月获得一次闪送机会</span></div>
          <div class="df df-l"> <i></i> <span class="fs14 c666 mb10">每月只需消费3单，即可赠送一个月免运费</span> </div>
          <div class="df df-l"> <i></i> <span class="fs14 c666 mb10">大波福利，积分可兑好礼</span></div> -->

          <div class="df df-c tx-c">
            <div class="no-btn mr20" :class="[{'wm-nobtn':isWm,'yht-nobtn':isYht}]" @click="vipCardPopupShow=true">残忍拒绝</div>
            <div class="submit-btn" :class="[{'wm-btn':isWm,'yht-btn':isYht}]"  @click="openWebView('/store/new?storeId=' + baseInfo.storeId)">立即领取</div>
          </div>
        </div>
      </div>
    </Popup>
  </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">

  @keyframes fadeio {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .container{
    border-top:2rpx solid $themeColor;
  }
  .tab-search{
    height: 120px;
    background:url("../assets/images/common/xcx_index_bg.png") no-repeat center;
    background-size: cover;
    .top{
      height: 32px;
      .address{
        align-items: center;
        margin-right: 14px;
        .img{
          width: 14px;
          height: 18px;
          vertical-align: middle;
          margin-left: 10px;
        }
        .right-arrow{
          width:6px;
          height:6px;
          vertical-align:middle;
          transform:rotateZ(45deg);
          border-top:4rpx solid #fff;
          border-right:4rpx solid #fff;
        }
      }
      .vip-code{
        margin-right: 10px;
        .img{
          width: 20px;
          height: 20px;
          margin: 0 auto;
        }
      }
      .search{
        position: relative;
        margin-right: 10px;
        img{
          width: 16px;
          height: 16px;
          position: absolute;
          left: 11px;
          top: 9px;
        }
        input{
          height: 32px;
          background-color: #fff;
          border-radius: 17px;
          padding-left: 34px;
        }
      }
    }
  }
  .main {
    position: relative;
    top:-84px;
    .user-group {
      padding: 12px;
      .user-info {
        background-color: #fff;
        border-radius: 6px 6px 0 0;
        .gr{
          width: 7px;
          height: 7px;
        }
        .head-img {
          width: 54px;
          height: 54px;
          margin-right: 12px;
          border-radius: 100%;
        }
        .sign-btn-wrap {
          text-align: center;
          .sign-btn {
            display: flex;
            align-items: center;
            padding: 5px 12px;
            border-radius: 30px;
            color: #ffffff;
            background-image: linear-gradient(179deg, #FF7E00 0%, #FF5500 100%);
            .icon {
              width: 22px;
              height: 22px;
              margin-right: 5px;
            }
          }
        }
      }

      .nav-wrap {
        background-color: #fff;
        display: flex;
        border-radius: 0 0 6px 6px ;
        .nav-item {
          flex: 1;
          text-align: center;
          padding: 15px 0;
        }
      }

    }
      .vip-code-wrap {
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 6px;
        color: #ffffff;
        background: url('../assets/images/common/home_vip_bg.png') no-repeat center;
        background-size: cover;
        img {
          width: 20px;
          height: 20px;
        }
        .diamond {
          width: 85px;
          height: 21px;
        }
      }

    .box-wrap {
      padding: 12px 12px 0 12px;
      .group {
        margin-bottom: 12px;
        border-radius: 8px;
        background: #FFFFFF;
        .group-title {
          padding: 12px;
          font-size: 15px;
          font-weight: bolder;
        }

        &.service-group {
          .nav-wrap {
            display: flex;
            flex-wrap: wrap;
            padding: 8px 0;
            .nav-item {
              flex: 25% 0 0;
              padding-bottom: 19px;
              text-align: center;
              img {
                width: 44px;
                height: 44px;
              }
            }
          }
        }

        &.activity-group {
          .activity-wrap {
            padding: 0 12px;
            .activity-item {
              height: 97px;
              width: 100%;
              margin-bottom: 12px;
              border-radius: 3px;
              vertical-align: middle;
            }
          }
        }

        &.point-group {
          .banner-img {
            height: 80px;
            margin: 0 12px;
            border-radius: 8px;
            background: url("../assets/images/common/home_Integral_draw.png") no-repeat center;
            background-size: cover;
          }
          .points-goods-list {
            display: flex;
            padding: 12px 6px;
            .goods-wrap {
              flex: 33.33% 0 0;
              padding: 0 6px;
              box-sizing: border-box;
            }
          }
        }

        &.coupon-group {
          .coupon-list {
            display: flex;
            padding: 0 6px 12px 6px;
            .coupon-wrap {
              flex: 50% 0 0;
              padding: 0 6px;
              box-sizing: border-box;
              &.coupon-remove {
                animation: fadeio 1s;
              }
            }
          }
        }

      }
    }

    .store-group {
      img {
        width: 70px;
        height: 20px;
      }
    }
  }

  .sign-popup {
    width: 270px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    .close{
      width: 28px;
      height: 28px;
      // float: right;
    }
    .title {
      padding-bottom: 18px;
      img{
        width: 210px;
        height: 150px;
      }
    }
  }
.vip-card-popup{
  .top{
    width: 320px;
    height: 180px;
    background: url("../assets/images/common/membership_card_bg.png") no-repeat center;
    background-size: 100% 100%;
    padding:50px 12px 0 12px;
    box-sizing: border-box;
  }
  .img-card{
    width: 160px;
    height: 86px;
    margin: 0 auto;
  }
  .content{
    width: 320px;
    height: 120px;
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    box-sizing: border-box;
    i{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #EEE;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }
  .tips{
    margin-top: 20px;
  }
  .no-btn{
      border: 1px solid $themeColor;
      width: 130px;
      height: 44px;
      line-height: 44px;
      border-radius: 6px;
      color: $themeColor;
    }
    .submit-btn{
      border: 1px solid $themeColor;
      width: 130px;
      height: 44px;
      line-height: 44px;
      border-radius: 6px;
      color: #fff;
      background-color: $themeColor;
    }
}
.popup-wrap {
    .popup-mask {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      background: rgba(0,0,0,0.30);
    }
    .popup-body {
      position: fixed;
      &.middle {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .points-draw{
    .middle{
      width: 320px;
    }
    .draw{
      height: 470px;
    }
    .close{
      width: 28px;
      height: 28px;
      // float: right;
    }
  }

  //万民主题色 #f39700
  .wm-container{
    border-top:2rpx solid #f39700;
  }
  .wm-color{
    color:#f39700;
  }
  .wm-tabBgimg{
    background:url("../assets/images/common/wanmin/xcx_index_bg.png") no-repeat center;
  }
  .wm-vipcodeImg{
    background:url("../assets/images/common/wanmin/home_vip.png") !important;
    background-size: cover !important;
  }
  .wm-vipcardBgimg{
    background:url("../assets/images/common/wanmin/membership_card_bg.png") no-repeat center !important;
  }
  .wm-nobtn{
    border-color: #f39700 !important;
    color: #f39700 !important;
  }
 .wm-btn{
   border-color:#f39700 !important;
   background-color:#f39700 !important;
 }

 //养和堂主题色 #159547
 .yht-color{
   color: #159547
 }
 .yht-container{
    border-top:2rpx solid #159547;
 }
  .yht-nobtn{
    border-color: #159547 !important;
    color: #159547 !important;
  }
 .yht-btn{
   border-color:#159547 !important;
   background-color:#159547 !important;
 }
 .yht-tabBgimg{
    background:url("../assets/images/common/yanghetang/xcx_index_bg.png") no-repeat center;
  }
  .yht-vipcodeImg{
    background:url("../assets/images/common/yanghetang/home_vip.png") !important;
    background-size: cover !important;
  }
  .yht-vipcardBgimg{
    background:url("../assets/images/common/yanghetang/membership_card_bg.png") no-repeat center !important;
  }
</style>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import goShare from '@/mixins/goShare'
  import TaskItem from '@/components/points/TaskItem.vue'
  import GoodsItem from '@/components/points/GoodsItem.vue'
  import CouponItem from '@/components/mall/CouponItem.vue'
  import Popup from '@/components/common/Popup.vue'
  import env from '@/js/env.js'

  export default {
    mixins: [goShare],
    data() {
      return {
        options: {},
        baseInfo: {},
        floor: [],          //  楼层
        cancelObj: {},
        pointsGoods: [],    //  积分商品
        couponsList: [],    //  展示出来的优惠券
        allCouponsList: [], //  待展示出来的优惠券
        signPopupShow: false,
        vipCardPopupShow:true,
        couponsListCancelObj: {},
        pointsGoodsListCancelObj: {},
        loadingUserIndexFirst: true,    //  是否第一次加载用户基础信息
        vipCard:{},
        area:'',
        drawPopupShow:false,
        isLive:false,
        isECoin:"",
        isIntegral:"",
        showJson: undefined,
        isWm: "",
        isYht: "",
        programWindowList: [], // 抽奖弹框的轮播图
        isWxWork: wx.getSystemInfoSync().environment === 'wxwork',    //  是否是企业微信小程序
        sharePhone:'',
        employeeType: 0,
        again:0,
        isShenYang: true,
        vichyShow: true
      }
    },

    components: {
      TaskItem,
      GoodsItem,
      CouponItem,
      Popup
    },

    computed: {
      ...mapGetters(['location', 'scopeId', 'storeId', 'locationCopy', 'wxID', 'nearestChain', 'userInfo', 'sharePageUrl', 'shareUrl', 'openId', 'cardDepartId','locationDetailInfo','addrName','showIndexPopup']),
      store () {
        return this.nearestChain
      },
      showMain () {     //  是否显示界面
        if (this.scopeId && this.openId) {
          return true
        }
        return false
      },
      phone () {
        if (this.userInfo && this.userInfo.phone) {
          this.updateAppSetting({
            userPhone:this.userInfo.phone
          })
          return this.$utils.secretMobile(this.userInfo.phone)
        }
        return ''
      },
      // area(){
      //   return this.getAreaStr(this.locationDetailInfo.address)
      // }
    },

    watch: {
      'baseInfo.cardCount'(newVal, oldVal){
        this.vipCardPopupShow = this.baseInfo.cardCount?true:false
      },
      locationCopy (newVal, oldVal) {
       this.getUserIndex()
        console.log(newVal,oldVal)
        if (newVal && oldVal != newVal) {
          this.getHomePage()
          this.login().then(data => {
            this.goShareCondition('index')
            this.getCouponsList()
            this.getPointsGoodsList()
            this.getVipCardList()
            // this.addrName = this.$const.getAreaStr(this.locationDetailInfo.address)
          }, err => {})
        }
      },
      userInfo (newVal, oldVal) {
        if (newVal && !oldVal) {    //  getUserIndex会更新 userInfo， 因为查看会员码用到userNo
          this.getUserIndex()
          this.getCouponsList()
          this.getPointsGoodsList()
          this.isShenyangCity()
          // console.log(this.locationDetailInfo)
          console.log('拿取地理位置');


          // this.addrName = this.$const.getAreaStr(this.locationDetailInfo.address)
        }
      },
      addrName(){
        this.getUserIndex();
      },
      'baseInfo.storeId'(){
         wx.setStorageSync('isWm','false');
         this.isWm = false;
         wx.setStorageSync('isYht','false');
         this.isYht = false;
        if(this.baseInfo.storeId=='4767'){ //万民：4767
          wx.setNavigationBarColor({
            backgroundColor:'#f39700',
            frontColor:'#ffffff'
          });
          wx.setNavigationBarTitle({
            title: '山西万民',
          });
          wx.setBackgroundColor({
            backgroundColor: '#f39700'
          });
           wx.setStorageSync('isWm','true')
           this.isWm = true;
        }
         if(this.baseInfo.storeId=='4776'){ //养和堂：4776
           wx.setNavigationBarColor({
             backgroundColor:'#159547',
             frontColor:'#ffffff'
           });
           wx.setNavigationBarTitle({
             title: '养和堂',
           });
           wx.setBackgroundColor({
             backgroundColor: '#159547'
           });
            wx.setStorageSync('isYht','true')
            this.isYht = true;
         }
          if(this.baseInfo.storeId!='4776' && this.baseInfo.storeId!='4767'){
            wx.setNavigationBarColor({
              backgroundColor:'#287C59',
              frontColor:'#ffffff'
            });
            wx.setNavigationBarTitle({
              title: '壹药臻选',
            });
            wx.setBackgroundColor({
              backgroundColor: '#287C59'
            })
          }
         console.log("isWm is "+this.isWm);
         console.log("isYht is " + this.isYht)
      }
    },

    methods: {
      ...mapActions(['updateAppSetting', 'loadShareUrl', 'login', 'openRouteByWebview', 'openLiveByWebview', 'openHealthRouteByWebview']),
      dev () {
        wx.showToast({
          title: '开发中，敬请期待！',
          icon: 'none',
          duration: 2000
        })
      },
      /**
       * 前往webview
       * @param route：路径
       * @param type：类型 healthWX健康社区 page原生页面 mall商城
       */
      openWebView (route, type = 'mall') {
        if(this.drawPopupShow){
          this.drawPopupShow = false
          this.updateAppSetting({
            showIndexPopup:1
          })
        }
        // 获取区域公司
        let companyStr = this.$const.getAreaCompany(this.baseInfo.storeId)
        let routeArr = {
          '/pointsMall/draw':'积分抽奖',
          '/index':'送药上门',
          '/pages/nearbyStore/list':'附近门店',
          '/goods/searchHome':'实时找药',
          '/user/card/cardList':'卡包',
          '/user/order/consumptionList':'消费记录',
          '/chat/room':'用药咨询',
          '/pointsMall':'积分商城',
          '/my/memberList':'健康档案',
          '/specialDisease':'特病管理',
          '/chronic':'慢病管理'
        }
          if(type == 'healthWX'){
            routeArr['/index']='健康社区'
          }else{
            routeArr['/index']='送药上门'
          }
        console.log(routeArr[route])
        console.log(companyStr)


        if(this.signPopupShow){
          this.signPopupShow = false
        }
        if (!this.scopeId || !this.openId) {
          return
        }
        if((type=='dzb' || type=='healthWX') && this.baseInfo.storeId && !this.baseInfo.cardCount){
            wx.showToast({
            title: '请先领取会员卡',
            icon: 'none',
            duration: 2000
          })
          return
        }
        if (!this.userInfo) {
          this.goLoginAction()
          return
        }

        if ((['/pointsMall'].includes(route) && this.baseInfo.integralFlag != 1) || (['/index'].includes(route) && this.baseInfo.medicineToDoorflag != 1 && type == 'h5')) {
          console.log(this.cardDepartId,'pointsMall')
          wx.showToast({
            title: '此功能该区域正在建设中！',
            icon: 'none',
            duration: 2000
          })
          return
        }

        //  打开健康社区外链
        if (type == 'healthWX') {
          console.log(this.cardDepartId,'dil')
          if (!this.cardDepartId) {
            wx.showToast({
              title: '此功能该区域正在建设中！',
              icon: 'none',
              duration: 2000
            })
            return
          }

          this.openHealthRouteByWebview({
            route: route,
            jumpType: 'push'
          })

          return
        }

        //  打开品牌馆外链
        if (route.includes('brandId')) {
          if (!this.baseInfo.brandId) {
            wx.showToast({
              title: '此功能该区域正在建设中！',
              icon: 'none',
              duration: 2000
            })
            return
          }
          // return
        }

        //  打开原生页面
        if (type == 'page') {
          mpvue.navigateTo({
            url: route
          })
          return
        }
        //  打开直播外链
        if(type == 'live'){
          this.openLiveByWebview({
            route: route,
            jumpType: 'push',
            sendUserInfo: true
          })
          return
        }

        //  打开医药商城h5外链
        this.openRouteByWebview({
          route: route,
          jumpType: 'push',
          sendLocation: true
        })

      },
      jumpWeizan () {
        wx.navigateToMiniProgram({
          appId: 'wx92d650b253f8f2e3',//小程序appid
          path: 'pages/index/index?zbid=1106745572',//跳转关联小程序app.json配置里面的地址
          extraData: {//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。
            // zbid: '1106745572'
          },
        //**重点**要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版）
          envVersion: 'release',
          success(res) {
            // 打开成功
          }
        })
      },
      // 前往登录
      goLoginAction () {
        wx.navigateTo({
          url: '/pages/register'
        })
      },
      //  前往会员码页面
      goCodePage () {
        wx.navigateTo({
          url: '/pages/vipCode'
        })
      },
      getHomePage () {
        //  获取楼层
        this.$api.getHomePage({
          scopeId: this.scopeId,
          storeId: this.storeId
        }).then(data => {
          const brandFloor = {
            banner: {
              advList: [{
                advContent: 'http://mall.iot-tech.site/group1/M00/00/0C/wKgAgV8n2B6AfIndAANFjbxkaiw261.jpg'
              }],
              type: 'brand'
            }
          }
          this.floor = data.floor || []
          if (this.addrName == '上海') {
            this.floor.unshift(brandFloor)
          }
        }, err => {
          console.log('楼层获取失败', err)
        })
        this.isShenyangCity();
      },
      getUserIndex (a= 0) {
        // 切换地址前先隐藏弹窗
        if (!this.userInfo) {
          return
        }

        if (this.loadingUserIndexFirst) {
          wx.showLoading()
        }

        //  获取用户基本信息
        this.cancelObj.request && this.cancelObj.request.abort()
        console.log(a)
        this.$api.userInfoIndex(this.cancelObj).then(data => {
          if (this.loadingUserIndexFirst) {
            wx.hideLoading()
          }
          this.vipCardPopupShow = true
          this.baseInfo = data || {}
          console.log(this.baseInfo.storeId,this.baseInfo.cardCount ,this.vipCardPopupShow)
          //品牌馆是否显示
          if(!this.baseInfo.brandId){
            this.vichyShow = false
          }else{
            this.vichyShow = true
          }

          // 首页抽奖弹窗判断
          if (!this.programWindowList.length) {
            this.getProgramWindow();
          }

          this.updateAppSetting({
            cardDepartId: this.baseInfo.cardDepartId || '',
            userInfo: this.baseInfo.userInfo
          })
          this.loadingUserIndexFirst = false
          this.isECoin = this.baseInfo.isECoin
          this.isIntegral = this.baseInfo.isIntegral


        }, err => {
          if (this.loadingUserIndexFirst) {
            wx.hideLoading()
          }

          err.msg && wx.showModal({
            title: '基本信息获取提示',
            content: err.msg,
            success: (res) => {}
          })
        })
      },
      // getVipCardList(){
      //   this.$api.checkVipCardList().then(res=>{
      //    this.vipCard = res.data[0]
      //    console.log(this.vipCard,111)
      //   })
      // },
      //  获取用户待领取优惠券列表
      getCouponsList () {
        this.couponsListCancelObj.request && this.couponsListCancelObj.request.abort()
        if(this.userInfo && this.userInfo.userId){
          this.$api.getHomeCouponList(this.couponsListCancelObj).then(data => {
            data && data.forEach(item => {
              item.isShow = true
            })

            this.allCouponsList = data || []
            this.couponsList = this.allCouponsList.splice(0, 2)
          }, err => {
            console.log('优惠券列表获取失败', err)
          })
        }
      },
      // 获取首页抽奖轮播弹框
      getProgramWindow () {
        const params = {
          storeId: this.baseInfo.storeId,
        }
        this.$api.getProgramWindow(params).then(data => {
          this.programWindowList = data.programWindowCode;
          if (this.programWindowList.length) {
            this.drawPopupShow = true;
          } else {
            this.drawPopupShow = false;
          }
        }, err => { console.log(err) })
      },
      removeCouponItem (index, info) {
        info.isShow = false

        setTimeout(() => {
          this.couponsList.splice(index, 1)

          if (this.allCouponsList.length) {
            this.couponsList.push(this.allCouponsList.splice(0, 1)[0])
          }
        }, 1000)

      },
      // 优惠卷本地加一
      addCouponItem(){
        console.log(this.baseInfo.voucherCount)
        this.baseInfo.voucherCount = this.baseInfo.voucherCount - 0 + 1
        console.log(this.baseInfo.voucherCount)
      },
      //  获取积分商品列表
      getPointsGoodsList () {
        this.pointsGoodsListCancelObj.request && this.pointsGoodsListCancelObj.request.abort()
        if(this.userInfo && this.userInfo.userId){
        this.$api.getHomePointsGoods({
          pageNo: 1,
          pageSize: 3,
          isPoint:1,
          isGift:1
        }, this.pointsGoodsListCancelObj).then(data => {
          this.pointsGoods = data.list || []
        }, err => {
          console.log('积分商品获取失败', err)
        })
        }
      },
      //  签到
      sign () {
        this.signPopupShow = false

        if (this.baseInfo.isSign) {   //  已签到
          this.openWebView('/pointsMall/dailySign')
          return
        }

        wx.showLoading()
        this.$api.pointsMallSign().then((res) => {
          wx.hideLoading()
          this.baseInfo.isSign = 1
          this.signPopupShow = true
          this.getUserIndex()
        }, err => {
          wx.hideLoading()
          err.msg && wx.showModal({
            title: '提示',
            content: err.msg,
            success: (res) => {}
          })
        })
      },
      // 更换位置
    replaceAddress() {
      let _this = this
      console.log('打开地图')

      wx.chooseLocation({
        success: res => {
          this.checkShowAddress = false
          wx.showLoading({
            title: '登录中'
          })
          console.log(this.location.latitude,1)
          this.updateAppSetting({
            location: { latitude: res.latitude, longitude: res.longitude },
            locationDetailInfo: res,
            addrName:this.$const.getAreaStr(res.address),
          });
          // setTimeout(()=>{
          //   wx.hideLoading()
          // },1500)

          //沈阳市页面坑位显示与否
          let reg = /.+?(省|市|自治区|自治州|县|区)/g;
          let city = res.address.match(reg)
          if(city[1] == '沈阳市'){
            this.isShenYang = false
          }else{
            this.isShenYang = true
          }
        }
      });
    },
    // 关闭
    closeDrawPopup(){
      this.drawPopupShow = false
        this.updateAppSetting({
          showIndexPopup:1
        })
    },
    // getAreaStr(str) {
    //     console.log(str,111)
    //   let reg = /.+?(省|市|自治区|特别行政区)/g;
    //   let arr = str.match(reg);
    //   let addr = arr[0]
    //   console.log(addr,222)
    //   return addr
    // },
      getIsLive(){
        var that = this
        wx.request({
          url: env.apiBaseUrl + '/qvb.json',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success (res) {
            that.isLive = res.data.qlvb
          }
        })
      },
      getWxWork(){
        if(this.isWxWork){
        let that = this
          wx.qy.login({
            success: function(res) {
              console.log(res.code,"企业微信code")
              if (res.code) {
                // 1.企业微信code换取手机号
                // 2.分享拼接企业微信code与渠道
                that.$api.getUserInfoByCode({
                  code: res.code
                }).then(data => {
                  that.sharePhone = data.mobile
                  that.employeeType = 1
                  that.updateAppSetting({
                    sharePhone: data.mobile,
                    employeeType: 1
                  })
                  if(res.data.code != 1 && that.again == 0 || that.again == 1){
                    that.again ++
                    that.getWxWork();
                  }
                }, err => {
                  if(that.again == 0 || that.again == 1){
                    that.again ++
                    that.getWxWork();
                  }
                })
              }
            }
          });
        }else{
          this.updateAppSetting({
            employeeType: 0
          })
        }
      },
      getShare(){
        //获取分享人手机号与渠道
        console.log(this.options,"index页获取渠道")
        if (this.options.userPhone) {
          this.updateAppSetting({
            getUserSharePhone: this.options.userPhone,
            getEmployeeType: this.options.employeeType
          })
          let params = {
            phone :this.options.userPhone || "",
            employeeType: this.options.employeeType|| ""
          }
          this.$api.bindEmployee(params).then(data => {
          }, err => {})
        }
      },
      isShenyangCity(){
        let reg = /.+?(省|市|自治区|自治州|县|区)/g;
        if(this.locationDetailInfo && this.locationDetailInfo.address){
          let city = this.locationDetailInfo.address.match(reg)

          if(city[1] == '沈阳市'){
            this.isShenYang = false
          }else{
            this.isShenYang = true
          }
        }
      }
    },
    onLoad(options) {
      this.options = options
      this.updateAppSetting({
        indexOptions: options
      })

      this.loadShareUrl()
      // this.goShareCondition('index')

      //  每次重启首页都要重新登录
      if (this.scopeId) {
        this.getHomePage()
        this.login().then(data => {
          this.goShareCondition('index')
        }, err => {});
      }
      this.getWxWork();
      this.getShare();
    },
    onShow () {
      this.getUserIndex()
      this.getIsLive();
    },
    onHide () {
      this.cancelObj.request && this.cancelObj.request.abort()
    },
    //  转发设置
    onShareAppMessage() {
      let phone = this.sharePhone || this.userInfo.phone || ''
      console.log(this.sharePhone, this.employeeType, '首页转发企业渠道')
      console.log(this.userInfo.phone, this.employeeType, '首页转发普通渠道')
      return {
        title: '壹药臻选',
        desc: '',
        path: 'pages/index?userPhone=' + phone +'&employeeType=' + this.employeeType,
        success: () => {},
      }
    },
}
</script>

